<template>
  <div>
    <a-card class="card" title="输入病人信息" :bordered="false">
      <a-form :form="form" class="form" @submit="handleSubmit">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="id">
              <a-input
                v-model="data.id"
                placeholder="请输入ID"
                v-decorator="[
                  'id',
                  {rules: [{ required: true, message: '请输入id', whitespace: true}]}
                ]"
                readOnly/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="姓名">
              <a-input
                v-model="data.name"
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  {rules: [{ required: true, message: '请输入姓名', whitespace: true}]}
                ]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="年龄">
              <a-input
                v-model="data.age"
                placeholder="请输入年龄"
                v-decorator="[
                  'age',
                  {rules: [{ required: true, message: '请输入年龄', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="性别">
              <a-select placeholder="请选择性别" v-decorator="[ 'gender', {rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option key="0">男</a-select-option>
                <a-select-option key="1">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="证件类型">
              <a-select placeholder="请选择证件类型" v-decorator="[ 'carType', {rules: [{ required: true, message: '请选择证件类型'}]} ]">
                <a-select-option v-for="c in cl" :key="c.key">{{ c.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="证件号">
              <a-input
                placeholder="请输入证件号"
                v-model="data.carId"
                v-decorator="[
                  'carId',
                  {rules: [{ required: true, message: '请输入证件号', whitespace: true},{pattern : /[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]/, message: '输入正确的身份证号'}]}
                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="电话号码">
              <a-input
                placeholder="请输入电话号码"
                v-decorator="[
                  'phone',
                  {rules: [{ required: true, message: '请输入电话号码', whitespace: true},{ pattern : /[1][3,4,5,7,8][0-9]{9}/,message: '请输入正确的电话号码' }]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="状态">
              <a-select placeholder="状态" v-decorator="[ 'state', {rules: [{ required: true, message: '请选择性别'}]} ]">
                <a-select-option v-for="s in sl" :key="s.key">{{ s.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="部门">
              <a-select placeholder="部门" v-decorator="[ 'department', {rules: [{ required: true, message: '请选择部门'}]} ]">
                <a-select-option v-for="d in ds" :key="d.key">{{ d.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="紧急联系人">
              <a-input
                placeholder="紧急联系人"
                v-decorator="[
                  'contact',
                  {rules: [{ required: true, message: '请输入紧急联系人', whitespace: true}]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="紧急联系人电话号码">
              <a-input
                placeholder="紧急联系人电话号码"
                v-decorator="[
                  'emergency',
                  {rules: [{ required: true, message: '紧急联系人电话号码', whitespace: true},{ pattern : /[1][3,4,5,7,8][0-9]{9}/,message: '请输入正确的电话号码' }]}
                ]" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item
              label="入院时间">
              <a-date-picker
                v-decorator="[ 'comeDate', {rules: [{ required: false, message: '请选择日期'}]} ]"
              >
              </a-date-picker>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="是否城乡医保"
              v-decorator="[
                'insurance',
                {rules: [{ required: true, message: '请选择是否为城乡医保', whitespace: true}]}
              ]">
              <a-radio value="0" :checked="data.insurance === 0">是</a-radio>
              <a-radio value="1" :checked="data.insurance === 1">否</a-radio>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="是否异地就医"
              v-decorator="[
                'allocate',
                {rules: [{ required: true, message: '请选择是否为异地就医', whitespace: true}]}
              ]">
              <a-radio value="0" :checked="data.allocate == 0">是</a-radio>
              <a-radio value="1" :checked="data.allocate == 1">否</a-radio>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <!--          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">-->
          <!--            <a-form-item lable="出院时间">-->
          <!--              入院时间 : <a-date-picker-->
          <!--                @change="onChange"-->
          <!--                v-decorator="[-->
          <!--                  'intDate'-->
          <!--                ]"/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="主治医师">
              <a-select placeholder="主治医生" v-decorator="[ 'doctor', {rules: [{ required: true, message: '请选择医生'}]} ]">
                <a-select-option v-for="d in doctorList" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
              <!--              <a-input-->
              <!--                placeholder="主治医师"-->
              <!--                v-decorator="[-->
              <!--                  'doctor',-->
              <!--                  {initialValue:data.doctor, rules: [{ required: true, message: '请输入主治医师', whitespace: true}]}-->
              <!--                ]" />-->
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="病房">
              <!-- <a-input
                placeholder="病房"
                v-decorator="[
                  'bed',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]" /> -->
              <a-select
                placeholder="请选择病房"
                @select="select"
                showSearch
                v-decorator="[
                  'ward',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]"
              >
                <a-select-option v-for="w in wardList" :key="w.number.toString()">
                  {{ w.number }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="床位号">
              <!-- <a-input
                placeholder="床位号"
                v-decorator="[
                  'bed',
                  {rules: [{ required: true, message: '请输入...', whitespace: true}]}
                ]" /> -->
              <a-select
                placeholder="请选择床位"
                v-decorator="[
                  'bed',
                ]"
              >
                <a-select-option v-for="bed in bedList" :key="bed.bedNumber">
                  {{ bedFilter(bed.bedNumber, bed.patientName) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="备注">
              <a-textarea/>
              <!--                placeholder="备注"-->
              <!--                v-decorator="[-->
              <!--                  'remarks',-->
              <!--                  {initialValue:data.remarks, rules: [{ required: true, message: '请输入...', whitespace: true}]}-->
              <!--                ]" -->
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" @click="handleSubmit(e)" :loading="loading">提交</a-button>
          <a-button style="margin-left: 8px" @click="goBack">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getPatient, updatePatient } from '../../api/patient'
import { stateList, departmentList, carTypeList, stateFilter, carTypeFilter, departmentFilter } from '../../dictionary'
import { getDoctor } from '../../api/doctor'
import { getBedPatientList, getWard } from '../../api/ward'

export default {
  name: 'EditPatient',
  data () {
    return {
      id: '',
      data: {},
      loading: false,
      doctorList: {},
      wardList: [],
      bedList: null,
      form: this.$form.createForm(this),
      ds: departmentList,
      cl: carTypeList,
      sl: stateList
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          const data = this.form.getFieldsValue(['id', 'name', 'carType', 'carId', 'gender', 'age',
            'phone', 'contact', 'emergency', 'state', 'department', 'doctor', 'ward', 'bed', 'comeDate',
            'remarks', 'insurance', 'allocate'])
          updatePatient(data).then(res => {
            console.log('patient update success')
            this.$router.push('/patient/index')
            this.$notification.success({
              message: '成功',
              description: `修改成功`
            })
          }).catch(err => {
            this.loading = false
            this.$notification.error({
              message: '失败',
              description: `修改失败`
            })
            alert(err)
          })
        }
      })
    },
    initValue () {
      getPatient(this.id).then(res => {
        this.data = res.result
        this.setValue()
      }).catch(err => {
        alert(err)
        console.log('err', err)
      })
    },
    setValue () {
      getBedPatientList(this.data.ward).then(res => {
        this.bedList = res.result
        this.form.setFieldsValue({ 'bed': this.data.bed })
        console.log(this.bedList)
      })
      this.form.setFieldsValue({
        'id': this.data.id,
        'name': this.data.name,
        'age': this.data.age,
        'gender': this.data.gender + '',
        'carType': this.data.carType,
        'carId': this.data.carId,
        'phone': this.data.phone,
        'state': this.data.state,
        'department': this.data.department,
        'contact': this.data.contact,
        'emergency': this.data.emergency,
        'doctor': this.data.doctor,
        'ward': this.data.ward,
        'comeDate': this.data.comeDate,
        'inDate': this.data.inDate,
        'remarks': this.data.remarks
      })
    },
    goBack () {
      this.$router.push('/patient/index')
    },
    select (value, option) {
      console.log('value', value)
      getBedPatientList(value).then(res => {
        this.bedList = res.result
        console.log(this.bedList)
      })
    },
    bedFilter (bed, name) {
      if (name === null) {
        return bed + '号床'
      } else {
        return bed + '号床 (' + name + ')'
      }
    },
    carTypeFilter,
    departmentFilter,
    stateFilter
  },
  created () {
    this.id = this.$route.query.id // 获取路径参数 id
    if (this.id === undefined || this.id === null) {
      this.$router.push('/patient/index')
    }
    getDoctor().then(res => {
      this.doctorList = res.result
    }).catch(err => {
      console.log('err', err)
    })
    getWard().then(res => {
      this.wardList = res.result
    }).catch(err => {
      console.log('err', err)
    })
  },
  mounted () {
    this.initValue()
  }
}
</script>
